<template>
  <div class="referencePanel_index">
    <div class="head">
      <span>参考内容</span>
    </div>
    <div class="list-box">
      <div v-for="(item, key) in props.fileList" :key="key" class="listitem">
        <div class="heads">
          <span class="xh">{{ key + 1 }}</span>
          <span class="title">{{ item.name }}</span>
          <img :src="fd" alt="" srcset="" @click="yulan(item)" />
        </div>
        <div class="bodys">
          <el-image :src="getIcon(item.filePath)" class="fileIcon"></el-image>
        </div>
      </div>
      <div v-if="!props.fileList.length" class="no-data">
        <LottieAnimation no-data-name="animationData" class="img" />
        <span>暂无内容~</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import _ from 'lodash';
import { ref, reactive, onMounted } from 'vue';
import fd from '@/assets/ai/fd.svg';
import fileTypes from '@/assets/fileTypes/port';
import LottieAnimation from '@/components/animation/index.vue';

const props = defineProps({
  fileList: {
    type: Array,
    default: () => [],
  },
});
const state = reactive({
  // 文件类型
  wolds: 'txt,doc,docx,pdf,ppt,pptx,xlsx,xls',
  imgs: 'jpg,jpeg,png,gif,webp,svg',
  audios: 'mp3,m4a,wav,webm,amr',
  videos: 'mp4,mov,mpeg,mpga',
});
onMounted(() => {});
const getIcon = (url = '') => {
  const houzhui = _.last(url.split('.'));
  let icon = '';
  if (_.includes(['doc'], houzhui)) {
    icon = fileTypes.doc;
  }
  if (_.includes(['docx'], houzhui)) {
    icon = fileTypes.docx;
  }
  if (_.includes(['jpg', 'jpeg'], houzhui)) {
    icon = fileTypes.jpg;
  }
  if (_.includes(['png'], houzhui)) {
    icon = fileTypes.png;
  }
  if (_.includes(['pdf'], houzhui)) {
    icon = fileTypes.pdf;
  }
  if (_.includes(['xlsx', 'xls'], houzhui)) {
    icon = fileTypes.xlsx;
  }
  if (_.includes(['txt'], houzhui)) {
    icon = fileTypes.txt;
  }
  if (_.includes(['text'], houzhui)) {
    icon = fileTypes.text;
  }
  if (_.includes(['html'], houzhui)) {
    icon = fileTypes.html;
  }
  if (_.includes(['md'], houzhui)) {
    icon = fileTypes.md;
  }
  if (_.includes(['ppt'], houzhui)) {
    icon = fileTypes.ppt;
  }
  if (_.includes(['pptx'], houzhui)) {
    icon = fileTypes.pptx;
  }

  return icon;
};
</script>

<style scoped lang="scss">
.referencePanel_index {
  // padding: 16px;
  height: calc(100% - 40px);
  border-radius: 8px;
  width: 316px;
  background: rgba(255, 133, 0, 0.05);
  border-radius: 8px;
  box-sizing: border-box;
  margin: 20px 0;
  overflow: hidden;

  .head {
    padding: 16px 16px 0 16px;
    span {
      width: 54px;
      height: 25px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 18px;
      color: #1a1a1a;
      line-height: 25px;

      &::before {
        position: absolute;
        content: '';
        background-image: url('@/assets/ai/tabSelect.svg');
        width: 54px;
        height: 25px;
        background-size: 39.75px 11.59px;
        background-position: bottom center;
        background-repeat: no-repeat;
        z-index: -1;
      }
    }
  }

  .list-box {
    height: calc(100% - 50px);
    overflow: auto;
    box-sizing: border-box;
    margin-left: 16px;
  }
  .listitem {
    width: 284px;
    height: 182px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #eeeeee;
    margin-top: 18px;

    .heads {
      display: flex;
      align-items: center;
      padding: 10px;
      box-sizing: border-box;

      .xh {
        width: 20px;
        height: 20px;
        background: #eeeeee;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;

        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #444444;
        line-height: 18px;
      }

      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #1a1a1a;
        line-height: 20px;
        flex: 1;
        margin: 0 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      img {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }

    .bodys {
      width: 264px;
      height: 132px;
      border: 1px solid #f9f9f9;
      margin: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      .fileIcon {
        width: 100px;
      }
    }
  }
  .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px;

    .img {
      width: 100px;
      height: 100px;
      margin-bottom: 10px;
    }

    span {
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #cccccc;
      line-height: 20px;
    }
  }
}
</style>
